<template>
    <div
        class="circle-wrap"
        :style="'width:'+width+';height:'+width+';'">
        <el-progress
            type="circle"
            :percentage="percent > 100 ? 100 : percent"
            :width="width"
            :stroke-width="strokeWidth"
            :status="status"
            :show-text="false"/>
        <div class="inner-text">
            <slot>
                <div class="inner-total">{{ total }}</div>
                <div class="inner-percent">{{ percent | percentFilter }}%</div>
            </slot>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        strokeWidth:{
            type: Number,
            default: 6
        },
        status: {
            type: String,
            default: 'success'
        },
        total: {
            type: Number,
            default: 0
        },
        percent: {
            type: Number,
            required: true
        },
        width: {
            type: Number,
            default: 126
        }
    },
    components: {},
    data() {
        return {
        };
    },
    filters: {
        percentFilter(val){
            if(val){
                return parseInt(val);
            }
            return 0;
        }
    },
    methods: {}
};

</script>

<style lang="less" scoped>
    .circle-wrap{
        position: relative;
        display: inline-block;
    }
    .inner-text{
        position: absolute;
        top: 50%;
        left:50%;
        font-size: 16px;
        color: #2D2F33;
        letter-spacing: 1px;
        line-height: 20px;
        transform: translate(-50%, -50%);
        div{
            text-align: center;
        }
    }
</style>